<template>
  <!-- 详细数据 -->
      <div class="model detail_box">
        <div class="model_head detail_box_head">
          礼物类型数据
        </div>
        <!-- 数据内容 -->
        <div v-loading="data.loading" id="detail_content" class="model_content detail_content">
          <el-table :data="data.detail.data" stripe style="width: 100%">
            <el-table-column prop="gift_name" label="礼物名" />
            <el-table-column prop="bili_gift_id" label="礼物ID" />
            <el-table-column prop="gift_type" label="礼物类型" />
            <el-table-column prop="gift_price" label="礼物价值" />
            <el-table-column prop="is_delete" label="操作" >
              <template v-slot="scope">
                <el-button disabled v-if="!scope.row.is_delete" @click="deleteGift(scope.row.gift_id)" type="danger">删除</el-button>
                <el-button v-if="scope.row.is_delete" @click="recoverGift(scope.row.gift_id)" type="success">恢复</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            v-model:current-page="data.page"
            :page-size="data.page_size"
            :page-sizes="[10, 20, 30, 40, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.detail.total"
            @size-change="onPageSizeChange"
            @current-change="onPageChange"
          />
        </div>
      </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/http/http'
const data = reactive({
  false: false,
  detail: {
  },
  loading: true,
  // 默认配置
  getDetailOption: {
    page: 1,
    page_size: 10
  }
})
onMounted(() => {
  setDetailData()
})
const onPageChange = (e) => {
  data.page = e
  setDetailData(data.getDetailOption)
}
const onPageSizeChange = (e) => {
  data.page_size = e
  setDetailData(data.getDetailOption)
}
/**
 * 获取并渲染 详细数据
 */
const setDetailData = () => {
  data.loading = true
  http
    .request({
      url: '/Admin/getGiftList',
      data: {
        page: data.page,
        page_size: data.page_size
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.detail = res.data
        data.loading = false
      }
    })
}
const recoverGift = (giftId) => {
  data.loading = true
  http
    .request({
      url: '/Admin/recoverGift',
      data: {
        gift_id: giftId
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        ElMessage.success(res.message)
        setDetailData(data.getDetailOption)
      } else {
        ElMessage.error(res.message)
      }
    })
}
const deleteGift = (giftId) => {
  ElMessage.error('目前禁止删除')
  return false
  // data.loading = true
  // http
  //   .request({
  //     url: '/Admin/deleteGift',
  //     data: {
  //       gift_id: giftId
  //     },
  //     method: 'POST'
  //   })
  //   .then((res) => {
  //     if (res.status === 200) {
  //       ElMessage.success(res.message)
  //       setDetailData(data.getDetailOption)
  //     } else {
  //       ElMessage.error(res.message)
  //     }
  //   })
}
</script>

<style lang="scss" scoped>
</style>
